<template>
  <div class="statistics">
    <div class="chartArea">
      <zy-title>快递数据统计</zy-title>
      <div class="chartHeader">
        <div class="tabs">
          <div class="tabItem" :class="{active: activeName === 'time'}" @click="tabClick('time')">时间</div>
          <div class="tabItem" :class="{active: activeName === 'company'}" @click="tabClick('company')">合作企业</div>
        </div>
        <div class="timeSelect" slot="title">
          <el-date-picker v-model="time" :type="activeName === 'company'?'year': 'date'" placeholder="选择日期"
                          @change="getLogisticMonthCount"></el-date-picker>
          <el-select v-if="activeName === 'company'" class="selectInput" v-model="companyId"
                     @change="getLogisticMonthCount">
            <el-option v-for="option in companyList" :key="option.company_id" :label="option.company_name"
                       :value="option.company_id"></el-option>
          </el-select>
        </div>
      </div>
      <div id="my_chart" v-loading="chartLoading"></div>
    </div>

    <filterPanel filterName="CStatisticsFilter" filterTitle="收寄件统计查询" :filterList="filterData"
                 @filterChange="filterChange"></filterPanel>
    <tablePanel tableName="CStatisticsTable" :tableLoading="loading" tableTitle="收寄件统计列表" :tableList="tableList"
                :tableData="tableData" :total="total" :currentPage="form.page_start" :pageSize="form.page_size"
                @sizeChange="sizeChange" @pageChange="pageChange" @tableClick="tableClick">
      <div class="total-box">
        <div class="total-info">总收件数<span>{{total}}</span>件</div>
      </div>
      <zy-button type="primary" @click="exportUrl">导出列表</zy-button>
    </tablePanel>
  </div>
</template>

<script>
	export default {
		name: "CStatistics",
		props: {},
		data() {
			return {
				filterData: [
					{
						title: '录入时间',
						name: 'time',
						type: 'date',
						value: [],
						isShow: true,
						isSelected: true
					},
					{
						title: '快递类型',
						name: 'logistics_type',
						type: 'select',
						optionList: [
							{label: '全部', value: ''},
							{label: '收件', value: '2'},
							{label: '寄件', value: '1'},
						],
						value: '',
						isShow: true,
						isSelected: true
					},
				],
				form: {
					logistics_type: "",
					time: [],
					page_start: 1,
					page_size: 10
				},
				loading: false,
				tableList: [
					{
						title: '合作企业',
						width: 200,
						name: 'company_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '快递类型',
						width: 120,
						name: 'logistics_type_desc',
						isShow: true,
						isSelected: true
					},
					{
						title: '快递单号',
						width: 160,
						name: 'logistics_no',
						isShow: true,
						isSelected: true
					},
					{
						title: '收件人姓名',
						width: 120,
						name: 'receive_communicate_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '收件人手机号',
						width: 120,
						name: 'receive_communicate_mobile',
						isShow: true,
						isSelected: true
					},
					{
						title: '录入时间',
						width: 160,
						name: 'create_time_desc',
						isShow: true,
						isSelected: true
					},
					{
						title: '寄件人姓名',
						width: 120,
						name: 'post_communicate_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '寄件人手机号',
						width: 120,
						name: 'post_communicate_mobile',
						isShow: true,
						isSelected: true
					},
					{
						title: '操作',
						width: 100,
						name: 'handler',
						fixed: 'right',
						btns: [
							{
								type: 'look',
								name: '详情'
							},
						],
						isSelected: true
					}
				],
				tableData: [],
				total: 0,
				download_url: '',
				activeName: 'time',
				time: new Date(),
				companyId: '',
				companyList: [],
				chartLoading: false
			};
		},
		computed: {
			postData() {
				let data = {
					...this.form,
					pagination: {
						page_start: this.form.page_start,
						page_size: this.form.page_size
					}
				};
				if (this.form.time && this.form.time.length > 0) {
					data.create_time_start = this.form.time[0] / 1000;
					data.create_time_end = this.form.time[1] / 1000;
				}
				return data;
			},
		},
		watch: {},
		components: {},
		methods: {
			tabClick(val) {
				this.activeName = val;
				this.getLogisticMonthCount();
			},
			sizeChange(val) {
				this.form.page_size = val;
				this.getData()
			},
			pageChange(val) {
				this.form.page_start = val;
				this.getData()
			},
			filterChange(data) {
				this.form = {...this.form, ...data};
				this.getData();
			},
			getData() {
				this.loading = true;
				this.$axios.post(this.$api.c_listLogistics, this.postData).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.tableData = data.list.filter(item => {
							item.look = true;
							return item;
						});
						this.total = data.pagination.total_count || 0;
						this.download_url = data.download_url;
					} else {
						this.total = 0;
						this.tableData = [];
					}
				}).catch(ret => {
					this.loading = false;
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			exportUrl() {
				this.$import_excal(this.download_url || "");
			},
			tableClick(data, type) {
				this.$toRoutePath({
					path: "/cooperate/statistics/detail",
					edit: true,
					query: {
						type: type,
						logistics_id: data.logistics_id
					}
				});
			},
			getLogisticMonthCount() {
				this.chartLoading = true;
				this.$axios.post(this.$api.c_getLogisticMonthCount, {
					year: this.time ? this.$Timestamp(new Date(this.time).getTime(), this.activeName === 'company' ? 'year' : 'day') : '',
					company_id: this.companyId,
					type: this.activeName === 'company' ? 1 : 0,
				}).then(res => {
					let {code, msg, data} = res;
					this.chartLoading = false;
					if (code == 200) {
						let timeData = [], receiveData = [], sendData = [];
						for (var key in data.month) {
							timeData.push(this.activeName === 'company' ? key + '月' : key);
							receiveData.push(data.month[key].collect);
							sendData.push(data.month[key].send);
						}

						this.draw(timeData, receiveData, sendData);
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			getCompanyData() {
				this.$axios.post(this.$api.c_getCompanyList, {
					pagination: {
						page_start: 1,
						page_size: 9999
					}
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.companyList = data.list;
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			draw(timeData, receiveData, sendData) {
				this.myChart = this.$echarts.init(document.getElementById('my_chart'));
				let that = this;
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: '#9BA3AF'
							}
						},
						formatter: function (value) {
							if (that.activeName === 'company') {
								return that.$Timestamp(that.time, 'year') + '年'
							} else {
								if (value.length > 1) {
									return `${that.$Timestamp(that.time, 'month') + '-'}${value[0].axisValue}<br>${value[0].seriesName}：${value[0].value}<br>${value[0].seriesName}：${value[1].value}`;
								} else {
									return `${that.$Timestamp(that.time, 'month') + '-'}${value[0].axisValue}<br>${value[0].seriesName}：${value[0].value}`;
								}
							}
						}
					},
					legend: {
						data: ['收件', '寄件'],
						bottom: '0',
					},
					grid: {
						top: '12px',
						left: '3%',
						right: '4%',
						bottom: '20px',
						containLabel: true
					},
					xAxis: {
						axisLabel: {
							textStyle: {
								color: "#9BA3AF",
								fontSize: 12,
							},
							formatter: '{value}'
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(199, 203, 209, 0.5)'
							}
						},
						type: 'category',
						boundaryGap: false,
						data: timeData
					},
					yAxis: [{
						type: 'value',
						axisTick: {show: false},
						axisLine: {
							lineStyle: {
								color: 'rgba(60,121,237,.1)'
							}
						},
						axisLabel: {
							textStyle: {
								color: "#9BA3AF",
								fontSize: 12,
							},
							formatter: function (value) {
								return value;
							}
						},
						splitLine: {
							lineStyle: {
								color: 'rgba(44, 55, 76, 0.15)'
							}
						}
					}],
					series: [
						{
							name: '收件',
							type: 'line',
							stack: '总量',
							data: receiveData,
							color: '#0077FB',
							lineStyle: {
								normal: {           //F86C6B
									color: '#0077FB',
									width: 4,
								}
							},
						},
						{
							name: '寄件',
							type: 'line',
							stack: '总量',
							data: sendData,
							color: '#FBDB01',
							lineStyle: {
								normal: {           //F86C6B
									color: '#FBDB01',
									width: 4,
								}
							},
						},
					]
				};
				this.myChart.setOption(option);
			},
		},
		mounted() {
			this.getData();
			this.getLogisticMonthCount();
			this.getCompanyData();
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/cooperate/statistics/statistics/index.less">

</style>
